<!--
 * @Author: 刘苗
 * @Description: 
 * @Date: 2021-08-24 15:53:43
-->
<template>
  <div class="tabletoolbar_container">
    <div class="left_container">
      <!-- 操作 -->
      <slot></slot>
    </div>
    <div class="right_container">
      <el-tooltip class="item" effect="dark" content="视图设置" placement="top">
        <el-popover
          placement="bottom"
          width="130"
          trigger="click"
          v-model="visible"
        >
          <div class="table_cols_list">
            <!-- <draggable element="ul" v-model="colsList"> -->
              <div
                class="table_cols_item"
                v-for="(item, index) in colsList"
                :key="index"
              >
                <el-checkbox
                  v-model="item.showInTable"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-checkbox
                >
              </div>
            <!-- </draggable> -->
            <div class="btn_footer" style="margin-top: 20px">
              <el-button type="" size="mini" @click="visible = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="handleSetView"
                >保存</el-button
              >
            </div>
          </div>

          <el-button
            slot="reference"
            type="success"
            size="small"
            icon="el-icon-setting"
          ></el-button>
        </el-popover>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="下载" placement="top">
        <el-button
          type="success"
          size="small"
          icon="el-icon-download"
          style="margin: 0 10px"
        ></el-button>
      </el-tooltip>
    </div>
  </div>
</template>



<script>
import _ from "lodash";
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  props: {
    cols: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      visible: false,
      copyCols: [],
    };
  },
  computed: {
    colsList: {
      get() {
        return (this.copyCols = _.cloneDeep(this.cols));
      },
      set(newValue) {
        console.log(newValue)
        this.copyCols = newValue;
      this.$forceUpdate()
        
      },
    },
  },
  methods: {
    handleSetView() {
      this.$emit("handleSetView", this.colsList);
    },
  },
};
</script>



<style lang="scss" scoped>
.tabletoolbar_container {
  padding: 5px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  .left_container {
    width: 100%;
    text-align: left;
  }
  .right_container {
    width: 100%;
    text-align: right;
  }
}
</style>